import React, { Component } from 'react'
import { NavBar, FlatList, Image, Icon } from 'components'
import { post, NotBean } from '../../../utils'
import { Link } from 'react-router-dom'

export default class Follow extends Component<any, any> {
    private index: number = 1

    public render(): JSX.Element {
        const { followData } = this.props
        return (
            <section className={`myFollow ${(followData.length > 0) ? 'myFollow_bgWhite' : ''}`}>
                <div className="myFollow_placehoder">
                    <div className="myFollow_top">
                        <NavBar
                            title="关注的店铺"
                        />
                    </div>
                </div>
                <FlatList
                    data={followData}
                    height="calc(100vh - 2.5rem)"
                    onRefresh={this.getData}
                    ListEmptyComponent={NotBean}
                    renderItem={
                        (item: any, index: number) => {
                            return (
                                <Link key={index} to={`/shop_bus/${item.get_seller_list.id}`}>
                                    <div className="myFollow_shopItem" onClick={this.handleGoToShop} >
                                        <Image src={item.get_seller_list.logo} />
                                        <div className="myFollow_shopInfo">
                                            <div className="myFollow_shopInfo_shopTitle">{item.get_seller_list.name}</div>
                                            <div className="myFollow_shopInfo_showFollowNum">{item.get_seller_list.collect_num}人关注</div>
                                            <div className="myFollow_shopInfo_shopActivStatu">
                                                {this.getStatusTag(item.get_seller_list.tags)}
                                            </div>
                                        </div>
                                        <div className="myFollow_shopMore">
                                            <Icon type="arrow_right" />
                                        </div>
                                    </div>
                                </Link>
                            )
                        }
                    }
                />
            </section>
        )
    }

    private getData = (finishLoad: () => void) => {
        const { userInfo, SET_USER_FOLLOW, followData } = this.props
        post('usersapi/userCollectSeller', {
            userId: userInfo.id,
        }).then((data: any) => {
            if (this.index === 1) {
                const val = data.data
                SET_USER_FOLLOW(val)
            }
            if (data.data.length) {
                const val = data.data
                if (this.index === 1) {
                    SET_USER_FOLLOW(val)
                } else {
                    const arr: any = [...followData]
                    SET_USER_FOLLOW(arr.concat(val))
                }
                finishLoad()
            }
        })
    }
    private getStatusTag = (statuCode: string) => {
        if (!statuCode) {
            return
        }
        const val = statuCode.split(',')
        return val.map((item: string, index: number) => {
            switch (item) {
                case '1':
                    return (
                        <span className="myFollow_shopsx" key={index}>上新</span>
                    )
                case '2':
                    return (
                        <span className="myFollow_shophd" key={index}>活动</span>
                    )
                default: return <span key={index}/>
            }
        })

    }
    private handleGoToShop = () => {
        // console.log(0)
    }
}